<template>
  <div class="preview">
    <div class="btn">
      <i :class="fileType"></i>
      <span>{{fileName}}</span>
      <el-button plain size="medium" class="btn-plain" @click="goback">返回</el-button>
    </div>
    <div class="iframe-box rel">
      <i class="abs" :class="fileType"></i>
      <iframe v-if="isFile" :src="urlHead+fileUrl" id="myiframe" frameborder="0" height="560" width="100%"></iframe>
    </div>
    <div class="img" v-if="isImage">
      <img :src="fileUrl" alt="">
    </div>
    <div class="video" v-if="isVideo">
      <my-player :videoSrc="fileUrl"></my-player>
    </div>
    <div class="audio" v-if="isAudio">
      <aplayer autoplay :music="musicOption">
      </aplayer>
    </div>
  </div>
</template>

<script>
  import {videoPlayer} from 'vue-video-player';
  import Aplayer from 'vue-aplayer';
  import {mapGetters} from 'vuex';
  import {api_url} from '@/config/config';

  export default {
    name: "preview",
    data() {
      return {
        urlHead: 'https://view.officeapps.live.com/op/embed.aspx?src=',
        musicOption: {
          title: '',
          artist: '未知',
          // url: 'http://mp3.qqmusic.cc/yq/4830150.mp3',
          src: ''
          // pic: 'http://devtest.qiniudn.com/Preparation.jpg',
          // lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
        }
      }
    },
    computed: {
      isFile() {
        let file = this.fileType;
        if (file === 'doc' || file === 'docx' || file === 'xls' || file === 'xlsx' || file === 'ppt' || file === 'pptx' || file === 'pdf') {
          return true;
        }
        return false;
      },
      isImage() {
        let file = this.fileType;
        if (file === 'jpeg' || file === 'jpg' || file === 'png' || file === 'gif') {
          return true;
        }
        return false;
      },
      isVideo() {
        let file = this.fileType;
        if (file.toLocaleLowerCase() === 'mp4') {
          return true;
        }
        return false;
      },
      isAudio() {
        let file = this.fileType;
        if (file.toLocaleLowerCase() === 'mp3') {
          return true;
        }
        return false;
      },
      type() {
        let file = this.fileType;
        switch (file.toLocaleLowerCase()) {
          case 'doc':
            return 'word';
            break;
          case 'docx':
            return 'word';
            break;
          case 'zip':
            return 'zip';
            break;
          case 'xls':
            return 'excel';
            break;
          case 'xlsx':
            return 'excel';
            break;
          case 'html':
            return 'html';
            break;
          case 'mp3':
            return 'mp3';
            break;
          case 'mp4':
            return 'mp4';
            break;
          case 'pdf':
            return 'pdf';
            break;
          case 'png':
            return 'png';
          case 'jpg':
            return 'png';
            break;
          case 'ppt':
            return 'ppt';
            break;
          case 'pptx':
            return 'ppt';
            break;
        }
      },
      ...mapGetters([
        'fileUrl',
        'fileType',
        'fileName'
      ])
    },
    created() {
      this.musicOption.title = this.fileName;
      this.musicOption.src = this.fileUrl;
    },
    methods: {
      goback() {
        this.$router.push({name: 'Catalog', params: {id: this.$route.params.id}});
        // this.$emit('goback', false);
      }
    },
    components: {
      Aplayer
    }
  }
</script>

<style lang="less" scoped>
  .iframe-box {
    .ppt {
      bottom: 18px;
      right: 24px;
      width: 200px;
      height: 22px;
      background-color: #444444;
    }
    .word {
      bottom: 15px;
      right: 24px;
      width: 200px;
      height: 22px;
      background-color: #fff;
    }
    .excel{
      bottom: 18px;
      right: 24px;
      width: 200px;
      height: 22px;
      background-color: #3d3f41;
    }
  }
</style>
